<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <script type="text/javascript" src="${ctx }/res/hplus/js/jquery.min.js"></script>
    <title>软装到家</title>
    <style>
    	a {
    		cursor:pointer;
    	}
    	.active {
   		    text-decoration: none;
   			color: #e4393c;
    	}
    </style>
</head>
<body>
 <%@include file="../common_head.jsp" %>
 <%@include file="../common_nav.jsp" %>
<div class="w-100p bg-f5 brand-list-box">
    <div class="w-1200 margin-0-auto brand-detail">
        <div class="row1 clear">
            <div class="cell">
                <div class="img-warp">
                    <img class="scrollLoading img-mini" src="${brandDTO.image }">
                </div>
                <div class="text">${brandDTO.content }</div>
            </div>
            <div class="cell">
                <img class="scrollLoading img-max" src="${brandDTO.headImage }">
            </div>
        </div>
        <div class="row2 clear">
            <div class="cell tab-nav" data-target="product-tab">
                <a href="javascript:void(0)">
                    <div class="number">${totalProduct }</div>
                    <div>产品</div>
                    <span class="icon"></span>
                </a>
            </div>
            <div class="cell tab-nav" data-target="plane-tab">
                <a href="javascript:void(0)">
                    <div class="number">${totalDesigns }</div>
                    <div>方案</div>
                    <span class="icon"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="w-1200 margin-0-auto product-tab tab-content" id="app">
        <!-- URL上的参数 -->
        <input type="hidden" id="styleID" value="${styleID }"/>
        <input type="hidden" id="brandID" value="${brandID }"/>
        
        <div class="brand-cat">
            <div class="name">
                <span><a href="#" onclick="query('')">分类</a></span>
            </div>
            <div id="productCategoryDIV" class="cat-cells">
            	<span><a href="javascript:void(0);" v-bind:class="categoryID == '' ? 'active' : ''" v-on:click="categoryID = ''">全部</a></span>
            	
            	<c:forEach items="${productCategorys }" var="pc">
            		 <span><a href="javascript:void(0);" v-bind:class="categoryID == ${pc.id } ? 'active' : ''" v-on:click="categoryID = ${pc.id }">${pc.name }</a></span>
            	</c:forEach>
            </div>
        </div>
        <div class="brand-cat">
            <div class="name">
                <span><a href="#" >排序</a></span> 
                <!-- onclick="sort('')" -->
            </div>
            <div class="cat-cells">
                <span> <a href="javascript:void('0);" v-bind:class="sortType == 1 ? 'active' : ''" v-on:click="sortType = 1">综合</a></span>
                <span> <a href="javascript:void('0);" v-bind:class="sortType == 2 ? 'active' : ''" v-on:click="sortType = 2">销量</a></span>
                <span> <a href="javascript:void('0);" v-bind:class="sortType == 3 ? 'active' : ''" v-on:click="sortType = 3">价格</a></span>
<%--                 <span> <a href="#" onclick="sort(1)" <c:if test="${sortType eq 1 }">class='active'</c:if> >人气</a></span> --%>
            </div>
        </div>
        <ul class="clear">
	                <li v-for="p in products">
	                    <a v-bind:href="'${ctx }/product/detail?id=' + p.id">
	                        <div class="brand-img img-scale">
	                            <img class="scrollLoading" v-bind:src="p.image" style="width:264px; height: 200px;">
	                        </div>
	                        <div class="text">{{p.name }}</div>
	                        <div class="price">￥{{p.specs[0].realPrice}}</div>
	                    </a>
	                </li>
        </ul>
        <!--分页-->
			<div class="w-1200 margin-0-auto page-warp clear">
				<div class="page">
					<div class="p-wrap">
						<span class="p-num"><input type="hidden" name="totalPages"
							id="totalPageProduct" value="6"> <input type="hidden"
							name="pageProduct" id="pageProduct" value="1"> <input
							type="hidden" name="styleID" id="styleID" value="0"> <input
							type="hidden" name="brandID" id="brandID" value="38"> <input
							type="hidden" name="categoryID" id="categoryID" value="">
							<input type="hidden" name="sortType" id="sortType" value="4">
							<a class="pn-prev2 disabled"><i>&lt;</i><em>上一页</em></a>
							 
							<a v-for="n in endPage" v-if="n >= startPage" v-bind:class="n == pageNum ? 'curr page-item2' : 'page-item2'" v-on:click="pageNum = n">{{n}}</a> 
							
							<a class="pn-next2" v-on:click="pageNum = parseInt(pageNum) + 1">下一页<i>&gt;</i></a></span> 
							<span class="p-skip"><em>共<b>{{totalPages}}</b>页&nbsp;&nbsp;
						</em></span>
					</div>
				</div>
			</div>
			<!-- 分页结束 -->
    </div>
    <div class="w-1200 margin-0-auto plane-tab tab-content">
        <ul class="clear">
        		<%-- <c:forEach items="${designProductDTOs }" var="dp">
        		
        			<li>
                    <a href="${ctx }/design/detail?id=${dp.id}">
                        <div class="brand-img img-scale">
                             <img class="scrollLoading" src="${dp.headImage }" /> 
                            <div class="bottom-info">
                                <span>${dp.houseStyle.name }</span>
                                <span>${dp.houseType.name }</span>
                                <i></i>
                                <span>${dp.area }</span>
                                <i></i>
                                <span>${dp.houseStyle.name }</span>
                                <i></i>
                                <span>${totalDesignProduct }件套</span>
                            </div>
                        </div>
                    </a>
                </li>
        		</c:forEach> --%>
                <c:forEach items="${designs }" var="dp">
        		<li>
                   <a href="${ctx }/design/detailNew?id=${dp.id}" title="${dp.title }">
                       <div class="brand-img img-scale">
                            <img class="scrollLoading" src="${dp.headImage }" /> 
                           <div class="bottom-info">
                               <span>${fn:substring(dp.title,0,5)}..</span>
                               <span>${dp.houseType.name }</span>
                               <i></i>
                               <span>${dp.area }</span>
                               <i></i>
                               <span>${dp.houseStyle.name }</span>
                               <%-- <i></i>
                               <span>${totalDesignProduct }件套</span> --%>
                           </div>
                       </div>
                   </a>
                </li>
        		</c:forEach>
        </ul>
        <!--分页-->
        
        <%@include file="../page4hardcoverDesign.jsp" %>
        <!--分页  -->
    </div>
    
    <script type="text/javascript">
        $(document).ready(function () {
             $('.tab-nav').on('click',function (event) {
                 $('.tab-nav').removeClass('active');
                 var $this = $(this),
                     target = $this.data('target');
                 $this.addClass('active');
                 $('.tab-content').fadeOut();
                 $("."+target).fadeIn();
                 if(target == 'product-tab'){
                     console.log(target)
                 }else if(target == 'plane-tab'){
                     console.log(target)
                 }
             });
            $('.tab-nav').eq(0).trigger('click');
            setNav(5);
        });
    </script>
</div>

<%@include file="../foot.jsp" %>

<script type="text/javascript">
    $(document).ready(function () {
        $("img.scrollLoading").lazyload({effect: "fadeIn", threshold: 300});
        $(".scrollLoading1 img").lazyload({effect: "fadeIn"});
    });
</script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/modules.js"></script>

<script type="text/javascript" src="${ctx }/js/vue.js"></script>
<script type="text/javascript" src="${ctx }/js/staybag/staybag_detail.js"></script>
<script>
	$(document).ready(function() {
		vm.findProducts();
	});
</script>
</body>
</html>
